<template>
  <ClDialog v-bind="$attrs" :title="getTitle" width="1390px">
    <ClBar :loading="loaded" bar-height="400px">
      <ClForm ref="formRef" label-width="150px" :form-item="formItem" />
    </ClBar>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('atClose')">取消</el-button>
        <el-button type="primary" @click="onSure">确定</el-button>
      </span>
    </template>
  </ClDialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { FORM_ITEM } from './data'
import { updateSysConstant } from '@/api/sysConstant'
const formItem = ref(cloneDeep(FORM_ITEM))
const formRef = ref()
onMounted(async () => {
  init()
})
const loaded = ref(false)
const init = async () => {
  try {
    loaded.value = false
    formItem.value.forEach((item) => {
      item.value = props.info[item.key]
    })
    loaded.value = true
  } catch (error) {
    loaded.value = true
  }
}
const api = async (res) => {
  try {
    await updateSysConstant({ ...res, id: props.info.id })
    emit('atClose', 'refresh-table')
  } catch (error) {
    console.log(error)
  }
}
const onSure = async () => {
  formRef.value.onsubmit(api)
}

const getTitle = computed(() => {
  return props.type
})

interface infoType {
  [props: string]: any
}
const props = defineProps<{ info: infoType; type: string }>()

const emit = defineEmits<{
  (e: 'atClose', str?: string | undefined): void
}>()
</script>

<style scoped lang="scss"></style>
